<!--
 * @Description: 
 * @Version: 1.0
 * @Author: Yuanjy
 * @Date: 2020-03-27 09:44:19
 * @LastEditors: 任飞
 * @LastEditTime: 2020-06-16 09:48:05
--> 
<template>
  <div class="detail-wrap">
    <el-form ref="form" :model="form" :rules="formRules" label-position="top" size="small">
      <el-row>
        <el-col :span="18" :offset="3">
          <el-form-item label="文章标题" prop="title">
            <el-input v-model="form.title" />
          </el-form-item>
          <el-form-item label="文章内容" prop="content">
            <qzCkEditor :content="form.content" @update-editor="updateEditor"/>
          </el-form-item>
          <el-form-item label="文章作者" prop="author">
            <el-input v-model="form.author" />
          </el-form-item>
          <el-form-item label="发布平台" prop="source">
            <el-input v-model="form.source" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row class="next-row">
        <el-col :span="8" :offset="3">
          <el-form-item label="文章类型" prop="type">
            <el-select v-model="form.type" placeholder="请选择" style="width:100%">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="发布日期" prop="publish_time">
            <el-date-picker v-model="form.publish_time" :picker-options="pickerOptions" type="date" placeholder="选择日期" style="width:100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-col :span="18" :offset="3">
        <el-form-item label="封面与摘要" prop="cover_path">
          <el-col :span="2">
            <one-file-upload :default-image="form.cover_path" :default-css="'mini-image-upload'" :default-file-type="new Array('image/jpeg','image/png', 'image/gif')" style="float:left;" @upload="getResponseImage" />
          </el-col>
          <el-col :span="22">
            <el-input v-model="form.description" :rows="4" type="textarea"/>
          </el-col>
        </el-form-item>
      </el-col>
    </el-form>
    <div class="footer-box">
      <div style="">
        <el-button :loading="loading" size="small" type="primary" @click="doSubmit"> 保 存 </el-button>
        <el-button size="small" type="warning" @click="preview"> 预 览 </el-button>
        <el-button size="small" @click="back"> 返 回 </el-button>
      </div>
    </div>
    <div v-if="showPhone" class="modal-wrap">
      <div class="preview-phone">
        <img class="close" src="/static/img/x.png" @click="closePreviewPhone">
        <div class="preview-content">
          <img class="head-top" src="/static/img/preview-top.jpg" >
          <div class="padding-wrap">
            <div class="title">{{ form.title }}</div>
            <div class="tags">
              <span class="span-btn">{{ form.type }}</span>
              <span>{{ form.author }}</span>
              <span class="span-from">{{ form.source }}</span>
              <span>{{ form.publish_time }}</span>
            </div>
            <div class="phone-text" v-html="form.content"/>
            <div class="read-num">阅读 666</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import NewEditor from "@/views/components/simditor"
import oneFileUpload from "@/views/components/oneFileUpload"

import qzCkEditor from "@/views/components/ckeditor"

export default {
  components: { NewEditor, oneFileUpload, qzCkEditor },
  props: {
    articleRow: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      loading: false,
      dialog: false,
      formTextContent: "",
      showPhone: false,
      form: {
        id: "",
        title: "",
        cover_path: "",
        content: "",
        description: "",
        publish_time: "",
        author: "",
        type: "",
        source: "团购服务平台"
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      options: [
        {
          value: "原创",
          label: "原创"
        },
        {
          value: "转载",
          label: "转载"
        },
        {
          value: "翻译",
          label: "翻译"
        }
      ],
      formRules: {
        title: [
          { required: true, message: '请输入文章标题', trigger: 'blur' }
        ],
        cover_path: [
          { required: true, message: '请上传封面图片', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入文章内容', trigger: 'blur' }
        ],
        publish_time: [
          { required: true, message: '请选择发布日期', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请输入文章作者', trigger: 'blur' }
        ],
        type: [
          { required: true, message: '请选择文章类型', trigger: 'change' }
        ],
        source: [
          { required: true, message: '请输入发布平台', trigger: 'blur' }
        ],
      }
    }
  },
  created() {
    
  },
  mounted() {
    const arr = Object.keys(this.articleRow)
    if (arr.length !== 0) {
      this.form = this.articleRow
    } else {
      this.resetForm()
    }
    console.log(this.form)
  },
  methods: {
    handleUpdate(val) {
      this.formTextContent = val
    },
    back() {
      this.$parent.editShow = false
    },
    preview() {
      this.showPhone = true
    },
    closePreviewPhone() {
      this.showPhone = false
    },
    getResponseImage(response) {
      this.form.cover_path = response.url
    },
    updateEditor(val) {
      this.formTextContent = val
      this.form.content = this.formTextContent
    },
    doSubmit() {
      this.loading = true
      this.form.content = this.formTextContent
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (!this.form.id) {
            this.doAdd()
          } else this.doEdit()
        } else {
          console.log('error submit!!')
          this.loading = false
          return false
        }
      })
    },
    doAdd() {
      this.$api.material.article
        .add({
          data: this.form
        })
        .then(res => {
          this.resetForm()
          this.$notify({
            title: "添加成功",
            type: "success",
            duration: 2500
          })
          this.$parent.init()
          this.$parent.editShow = false
        })
        .catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
    },
    doEdit() {
      this.$api.material.article
        .edit({
          data: this.form
        })
        .then(res => {
          this.resetForm()
          this.$notify({
            title: "修改成功",
            type: "success",
            duration: 2500
          })
          this.$parent.init()
          this.$parent.editShow = false
        })
        .catch(err => {
          this.loading = false
          console.log(err.response.data.message)
        })
    },
    resetForm() {
      this.form = {
        id: "",
        title: "",
        cover_path: "",
        content: "",
        description: "",
        publish_time: "",
        author: "",
        type: "",
        source: "团购服务平台"
      }
    }
  }
}
</script>
<style lang='less' scoped>
/deep/ .el-form-item--small .el-form-item__content {
  line-height: 25px;
}
.detail-wrap {
  padding-bottom: 25px;
}
.footer-box {
  position: fixed;
  bottom: 0;
  box-sizing: border-box;
  width: 100%;
  left: 0;
  background: #f2f2f2;
  border-top: 1px solid #dedede;
  height: 50px;
  text-align: right;
  line-height: 50px;
  padding-right: 300px;
  z-index: 999;
}
.modal-wrap {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: 999;
  .preview-phone {
      width: 435px;
      height: 888px;
      position: absolute;
      left: 50%;
      top: 5%;
      transform: translateX(-50%);
      border-radius: 2px;
      box-sizing: border-box;
      background-image: url("/static/img/mobile.png");
      background-repeat: no-repeat;
      background-size: cover;
      .close {
        position: absolute;
        right: -50px;
        width: 40px;
      }
      .preview-content {
        width: 375px;
        height: 667px;
        margin-top: 114px;
        margin-left: 30px;
        background: #fdfdfd;
        overflow-y: auto;
        &::-webkit-scrollbar{
          width:0; 
        }
        .head-top {
          width: 100%;
        }
        .padding-wrap {
          padding: 23px 18.5px;
          .title {
            color: rgba(0, 0, 0, 0.9);
            line-height: 30px;
            font-size: 22px;
            font-weight: bold;
          }
          .tags {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 23px;
            margin-bottom: 38px;
            flex-flow: row wrap;
            span {
              font-size: 12px;
            }
            .span-btn {
              padding: 4.5px 5.5px;
              color: rgba(0, 0, 0, 0.5);
              background: #f2f2f2;
              border-radius: 2px;
              font-size: 12px;
            }
            .span-from {
              color: #4a5b86;
            }
          }
          .phone-text {
            font-size: 14px;
            line-height: 1.6;
            background-size: contain;
            /deep/ .image {
              margin: 0;
              text-align: center;
            }
            /deep/ img {
              max-width: 100%;
              height: auto;
            }
            /deep/ h1,h2,h3,h4,h5,h6{
              font-size: 15px;
              line-height: 1.4;
              font-weight: bold;
              margin-top: 0 ;
              margin-bottom: 0;
            }
            /deep/ span,i{
              font-size: inherit;
              line-height: inherit;
            }
            /deep/ table,tr,td,th{
              line-height: inherit;
            }
            /deep/ p {
              font-size: 14px;
            }
          }
          .read-num {
            color: rgba(0, 0, 0, 0.4);
            font-size: 15px;
            margin-top: 38px;
            margin-bottom: 44px;
          }
        }
      }

  }
}
</style>